<template>
	<el-row class="board-page-wrapper">
		<el-row :gutter="10" class="query-container">
			<el-col :span="6" class="flex-wrapper">
				<span class="query-label">学年*</span>
				<el-select v-model="query.schoolYear" size="small" style="width: calc(100% - 70px);">
					<el-option v-for="(item, index) in studyYearList" :label="item.dictLabel" :value="item.dictLabel"
						:key="item.dictLabel"></el-option>
				</el-select>
			</el-col>
			<el-col :span="6" class="flex-wrapper">
				<span class="query-label">学期*</span>
				<el-select v-model="query.semester" size="small" style="width: calc(100% - 70px);">
					<el-option v-for="(item, index) in studyWeekList" :label="item.dictLabel" :value="item.dictLabel"
						:key="item.dictLabel"></el-option>
				</el-select>
			</el-col>
			<el-col :span="6">
				<el-button size="small" @click='btn()'>搜索</el-button>
			</el-col>
			<el-col :span="6" class="text-right">
				<el-button size="small" @click="exportExcel('#orderTableWrapper')">导出EXCEL</el-button>
				<el-button size="small" @click="exportPDF('#orderTableWrapper')">导出PDF</el-button>
			</el-col>
		</el-row>
		<section class="board-table-wrapper" id="orderTableWrapper">
			<el-table class="orderTable" id="orderTable" :data="tableData" border style="width: 100%"
				:span-method="spanMethod">
				<el-table-column prop="timeSlot" label="时间段" width="85" align="center"> </el-table-column>
				<el-table-column prop="times" label="节次" width="85" align="center"> </el-table-column>
				<el-table-column prop="monday" label="星期一" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.monday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.monday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.monday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.monday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.monday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="tuesday" label="星期二" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.tuesday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.tuesday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.tuesday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.tuesday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.tuesday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="wednesday" label="星期三" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.wednesday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.wednesday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.wednesday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.wednesday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.wednesday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="thursday" label="星期四" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.thursday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.thursday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.thursday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.thursday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.thursday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="friday" label="星期五" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.friday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.friday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.friday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.friday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.friday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="saturday" label="星期六" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.saturday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.saturday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.saturday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.saturday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.saturday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="sunday" label="星期日" align="center">
					<template slot-scope="scope">
						<el-popover placement="right-start" title="" width="300" trigger="hover"
							v-if="scope.row.sunday">
							<div class="table-wrapper">
								<p class="td-title">{{ scope.row.sunday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.sunday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
							<div class="table-wrapper" slot="reference">
								<p class="td-title">{{ scope.row.sunday.title }}</p>
								<div class="table-content">
									<p v-for="(item, index) in scope.row.sunday.content">
										<i class="iconfont" :class="item.icon"></i>
										<span class="td-text">{{ item.text }}</span>
									</p>
								</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</section>
	</el-row>
</template>

<script>
	 import { mapGetters } from 'vuex'
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'
	import download from '@/utils/htmlToPdf.js'
	import {
		getSenateTeacher
	} from '@/api/public/index.js'
	export default {
		data() {
			return {
				query: {
					semester: '1',
					schoolYear: '2020-2021'
				},
				tableData: [],
				rowList: [],
				spanArr: [],
				position: 0,
				studyYearList: [],
				studyWeekList: [
				],
				data: [
					// {
					// 	"BJMC": "智能A2012班", //班级名称
					// 	"address": "思齐楼309", // 上课地址
					// 	"XKNJ": "2020", // 选课年级
					// 	"JSGH": "20130077", //教师工号
					// 	"SKSJ": "星期一第1-2节{1-5周,7-16周};星期一第1-2节{17周};星期二第3-4节{2-16周(双)};星期四第1-2节{2-16周(双)};星期四第7-8节{7周}",
					// 	"KKXND": "2020-2021",
					// 	"JXDD": "思齐楼309;思齐楼306;思齐楼301;思齐楼308;思齐楼309",
					// 	"KCMC": "C语言程序设计", //课程名称
					// 	"XF": "4.0", // 学分
					// 	"KKXQM": "2", //开课学期码
					// 	"JXBMC": "(2020-2021-2)-21A1P19002-26", // 教学班名称
					// 	"whatDay": "星期一", // 星期
					// 	"ZXS": "64", //总学时
					// 	"SJXS": 32, //实践学时
					// 	"schooltime": "星期一第1-2节{1-5周,7-16周}",
					// 	"JXBH": "B62886D3D8BAC78FE053AA001EAC55DE", //教学班号
					// 	"LLXS": 32, // 理论学时
					// 	"KCXZ": "公共必修课", // 课程性质码
					// 	"JSXM": "吴娜", // 教师姓名
					// 	"SKBJH": "200110102", //上课班级号
					// 	"whichSection": "1-2" // 第几节
					// }
				]
			}
		},
		computed: {
		  ...mapGetters(['sidebar', 'avatar', 'device', 'name', 'niceName']),
		},
		mounted() {
			
			this.queryData()
		//	this.init()
			this.content_data('school_year_type')
			this.content_data('semester_type')

		},
		components: {},
		methods: {
			queryData() {
				//查询操作
				this.tableData = [{
						timeSlot: '上午',
						times: '1',
						monday: {
							// title: 'Java程序设计',
							// content: [
							//   { icon: 'icon-clock', text: '(3-4节)1-16周' },
							//   { icon: 'icon-address', text: '主校区 实训A2-303' },
							//   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
							//   { icon: 'icon-home', text: '智能S2061班' }
							// ]
						},
						tuesday: '',
						wednesdy: '',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '1',
						type: 0
					},
					{
						timeSlot: '上午',
						times: '2',
						monday: '第一节',
						tuesday: '',
						wednesdy: '',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '1',
						type: 0
					},
					{
						timeSlot: '上午',
						times: '3',
						monday: '第一节',
						tuesday: '第三节',
						wednesdy: '',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '',
						type: 2
					},
					{
						timeSlot: '上午',
						times: '4',
						monday: '第一节',
						tuesday: '第三节',
						wednesdy: '',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '',
						type: 2
					},
					{
						timeSlot: '下午',
						times: '5',
						monday: '第一节',
						tuesday: '',
						wednesdy: '第四节',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '',
						type: 4
					},
					{
						timeSlot: '下午',
						times: '6',
						monday: '第一节',
						tuesday: '',
						wednesdy: '第四节',
						thursday: '',
						friday: '',
						saturday: '',
						sunday: '',
						type: 4
					},
					{
						timeSlot: '下午',
						times: '7',
						monday: '第一节',
						tuesday: '',
						wednesdy: '',
						thursday: '第七节',
						friday: '',
						saturday: '',
						sunday: '',
						type: 6
					},
					{
						timeSlot: '下午',
						times: '8',
						monday: '',
						tuesday: '',
						wednesdy: '',
						thursday: '第七节',
						friday: '',
						saturday: '',
						sunday: '',
						type: 6
					}
				]
				this.spanArr=[
									[4, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1],
									[4, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1],
									[0, 1, 1, 1, 1, 1, 1, 1, 1]
								]
			},
			spanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return {
					rowspan: this.spanArr[rowIndex][columnIndex],
					colspan: this.spanArr[rowIndex][columnIndex] ? 1 : 0
				}
			},
			// 导出EXCEL
			exportExcel(id) {
				var reportTitle = '教师课表.xlsx'
				/* generate workbook object from table */
				// 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
				var fix = document.querySelector('.orderTable')
				var wb
				var xlsxParam = {
					raw: true
				} //转换成excel时，使用原始的格式
				if (fix) {
					wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix), xlsxParam)
					document.querySelector(id).appendChild(fix)
				} else {
					wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
				}
				/* get binary string as output */
				var wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(
						new Blob([wbout], {
							type: 'application/octet-stream'
						}),
						reportTitle
					)
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			},

			exportPDF() {
				let dom = document.getElementById('orderTableWrapper')
				download.downloadPDF(dom, '教师课表')
			},
			btn(){
				this.init()
			},
			init() {
				let _this = this;
			
				this.queryData()
					this.data=[]
				getSenateTeacher(this.query).then(res => {
					if(res.code==200){
						 this.$message({
						          showClose: true,
						          message: res.msg,
						          type: 'success'
						        });
						this.data=res.data
						let data = this.data;
						data.forEach(function(a, b) {
							let num = a.whichSection.split("-")[0]; //修改当前第几个
							let num2 = ''; //修改第几列
							let num3 = 2; //当前第列
							let status = 'monday'
							switch (a.whatDay) {
								case '星期一':
									num3 = 2
									_this.tableData[num - 1].monday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期二':
									num3 = 3
									status = 'tuesday'
									_this.tableData[num - 1].tuesday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期三':
								console.log(_this.tableData[num - 1])
									num3 = 4
									status = 'wednesdy'
									_this.tableData[num - 1].wednesday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期四':
									num3 = 5
									status = 'thursday'
									_this.tableData[num - 1].thursday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期五':
									num3 = 6
									status = 'friday'
									_this.tableData[num - 1].friday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期六':
									num3 = 7
									status = 'saturday'
									_this.tableData[num - 1].saturday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
								case '星期日':
									num3 = 8
									status = 'sunday'
									_this.tableData[num - 1].sunday = {
										title: a.KCMC,
										content: [{
												icon: 'icon-clock',
												text: a.schooltime
											},
											{
												icon: 'icon-address',
												text: a.address
											},
											{
												icon: 'icon-home',
												text: a.JXBMC + '-' + a.KKXQM
											},
											{
												icon: 'icon-home',
												text: a.BJMC
											}
										]
									}
									break;
						
								default:
									break
							}
							num2 = _this.spanArr[num - 1]
							num2[num3] = 2
							let tableData = _this.tableData[num - 1]
							console.log(_this.tableData[num - 1].status)
						
						
						})
					}else{
						  this.$message({
						          showClose: true,
						          message: res.msg
						        });
					}
				})
			},
			content_data(type) {
				this.getDicts(type).then(res => {
					var obj = {}
					if (res.code === 200) {
			
						switch (type) {
							/* 学年 */
							case 'school_year_type':
								this.studyYearList = res.data
								break;
								/* 校区 */
							case 'campus_type':
								this.schoolList = res.data
								break;
								/* 周次 */
							case 'keekly_type':
								this.weekTimeList = res.data
								break;
								/* 星期 */
							case 'week_type':
								this.weeklist = res.data
								break;
								/* 节次 */
							case 'section_type':
								this.sectionlist = res.data
								break;
								/* 学期 */
								case 'semester_type':
									this.studyWeekList = res.data
									break;
								
							default:
								break;
						}
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.board-page-wrapper {
		padding: 10px;

		.query-container {
			line-height: 32px;
			padding: 10px 30px;

			.flex-wrapper {
				display: flex;
				flex-wrap: nowrap;
			}

			.query-label {
				display: inline-block;
				width: 70px;
				text-align: right;
				margin-right: 5px;
			}
		}
	}

	.text-right {
		text-align: right;
	}
</style>
